<template>
  <view class="mineMain">
    <view class="mineBox">
      <view class="mineHeaderMain">
        <image src="../../static/images/headerImg.jpg" mode="widthFix"></image>
        <view class="mineheaderBox">
          <view class="rightTopBtnView flex align-center">
            <u-icon
              class="uIcon"
              name="chat-fill"
              color="#fff"
              size="48"
              @click="$u.route('/pages/notice/list')"
            ></u-icon>
            <u-icon
              class="uIcon"
              name="setting-fill"
              color="#fff"
              size="52"
              @click="$u.route('/pages/setting/index')"
            ></u-icon>
          </view>
          <view class="mineheaderCon">
            <view class="left">
              <view>
                <image
                  src="../../static/images/reHead.jpg"
                  mode="widthFix"
                ></image>
              </view>
              <text>{{
                  userInfo.nick_name
              }}</text>
            </view>
            <view
              class="right flex align-center"
              @click="jumpTap('/pages/wd/userInfo')"
            >
              <text>我的信息</text>
              <u-icon
                class="uIcon"
                name="arrow-right"
                color="#333"
                size="28"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
      <!-- 菜单 -->
      <view class="mineMenuMain">
        <u-cell-group>
          <u-cell-item
            icon="man-add"
            title="实名认证"
            @click="realNameTap"
            v-if="userInfo.isCert == 0"
          >
          </u-cell-item>
          <u-cell-item
            icon="man-add"
            title="已认证"
            @click="$u.route('/pages/wd/userInfo')"
            v-if="userInfo.isCert == 1"
          ></u-cell-item>
          <u-cell-item
            icon="rmb-circle"
            title="我的钱包"
            @click="jumpTap('/pages/wallet/wallet')"
          ></u-cell-item>
          <u-cell-item
            icon="share"
            title="发展代理"
            value="分享注册"
            @click="jumpTap('/pages/share/share')"
          >
          </u-cell-item>
<!--          <u-cell-item-->
<!--            icon="info-circle"-->
<!--            title="帮助指引"-->
<!--            @click="$u.route('/pages/helpCenter/helpCenter')"-->
<!--          >-->
<!--          </u-cell-item>-->
          <u-cell-item
            icon="server-fill"
            title="客服中心"
            @click="serviceContentTap"
          ></u-cell-item>
          <u-cell-item
            icon="setting"
            title="设置中心"
            @click="$u.route('/pages/setting/index')"
          ></u-cell-item>
        </u-cell-group>
      </view>
      <!-- 其他菜单 -->
    </view>
    <!-- 底部菜单 -->
    <u-tabbar
      :list="tabBarList"
      :mid-button="false"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :border-top="borderTop"
      mid-button-size="76"
      icon-size="40"
      height="105rpx"
    ></u-tabbar>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabBarList: [],
      borderTop: true,
      inactiveColor: "#909399",
      activeColor: "#fb4535",
      userInfo: {},
    };
  },
  onLoad() {
    this.tabBarList = this.$tabbar.tabbar;
  },
  onShow() {
    this.userInfo = uni.getStorageSync("loginInfo");
    this.$tools.changeNetword();
  },
  methods: {
    realNameTap() {
      this.$u.route({
        url: "/pages/wd/authName",
      });
    },

    jumpTap(url, type = "navigateTo") {
      let isAuth = uni.getStorageSync("loginInfo").isCert;
      if (isAuth == 1) {
        this.$u.route({
          url: url,
          type: type,
        });
      } else {
        this.$refs.uToast.show({
          title: "请先进行实名认证",
          type: "error",
        });
      }
    },
    // 客服中心
    serviceContentTap() {
      let mobile = uni.getStorageSync("loginInfo").account;
      let customer = {
        姓名: uni.getStorageSync("loginInfo").real_name
          ? uni.getStorageSync("loginInfo").real_name
          : "盛秘书",
        手机: mobile,
        来源: "盛秘书",
      };
      customer = JSON.stringify(customer);
      let url = encodeURIComponent(
        "http://chat.ahcdialogchat.com/chat/h5/chatLink.html?channelId=3L0fbR&history=true&customer=" +
          customer +
          "&uniqueId=" +
          mobile
      );
      uni.navigateTo({
        url: "/pages/serviceCenter/serviceCenter?url=" + url,
      });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #fff;
}

.mineHeaderMain {
  position: relative;

  > image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
  }

  .mineheaderBox {
    position: relative;
    z-index: 99;

    .rightTopBtnView {
      position: absolute;
      right: 0;
      top: 40rpx;
      height: 100rpx;
      padding: 0 30rpx;

      .uIcon {
        margin-left: 30rpx;
      }
    }

    .mineheaderCon {
      padding: 180rpx 30rpx 30rpx 60rpx;
      overflow: hidden;

      .left {
        float: left;
        margin-top: 20rpx;
        width:450rpx;

        > view {
          width: 130rpx;
          height: 130rpx;
          overflow: hidden;
          border-radius: 50%;
          border: 4rpx solid #fff;
          margin-bottom: 10rpx;
        }

        > text {
          display: block;
          line-height: 38rpx;
          text-align: center;

          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:nth-of-type(1) {
            font-size: 36rpx;
            font-weight: bold;
            line-height: 48rpx;
          }
        }
      }

      .right {
        float: right;
        padding-top: 140rpx;

        text {
          font-size: 32rpx;
        }

        .uIcon {
          position: relative;
          top: 2rpx;
        }
      }
    }
  }
}

.mineMenuMain {
  padding: 30rpx 0 0 30rpx;
}
</style>
